<div class="mat-elevation-z8">
    <table mat-table #table [dataSource]="dataSource" matSort>
        <!-- isActive Column -->
        <ng-container matColumnDef="isActive">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Active </th>
            <td mat-cell *matCellDef="let element">
                <mat-checkbox [checked]="element.isActive" [disabled]="true">
                </mat-checkbox>
            </td>
        </ng-container>

        <!-- firstName Column -->
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <!-- account Column -->
        <ng-container matColumnDef="account">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Account </th>
            <td mat-cell *matCellDef="let element"> {{element.account}} </td>
        </ng-container>

        <!-- email Column -->
        <ng-container matColumnDef="email">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
            <td mat-cell *matCellDef="let element"> {{element.email}} </td>
        </ng-container>

        <!-- addTime Column -->
        <ng-container matColumnDef="addTime">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Established Time </th>
            <td mat-cell *matCellDef="let element"> {{element.addTime| date:'yyyy/MM/dd HH:mm'}} </td>
        </ng-container>

        <!-- updatedTime Column -->
        <ng-container matColumnDef="updatedTime">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Updated Time </th>
            <td mat-cell *matCellDef="let element"> {{element.updatedTime| date:'yyyy/MM/dd HH:mm'}} </td>
        </ng-container>

        <!-- actions -->
        <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef class="actions">
                <button mat-icon-button class="TableButton" (click)="openCreateDialog()">
                    <mat-icon>add</mat-icon>
                </button>&nbsp;
                <button mat-icon-button class="TableButton" (click)="loadData()">
                    <mat-icon>refresh</mat-icon>
                </button>
            </th>
            <td mat-cell *matCellDef="let row; let i=index;" class="actions">
                <button mat-icon-button class="TableButton" (click)="openUpdateDialog(row)">
                    <mat-icon>edit</mat-icon>
                </button>&nbsp;
                <button mat-icon-button class="TableButton" (click)="openIMemberRoleDialog(row)">
                    <mat-icon>perm_identity</mat-icon>
                </button>&nbsp;
                <button mat-icon-button class="TableButton" (click)="openDeleteDialog(row)">
                    <mat-icon>delete_forever</mat-icon>
                </button>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

    <div class="no-results" [style.display]="paginator.length == 0 ? '' : 'none'">
        No results
    </div>

    <mat-paginator #paginator showFirstLastButtons [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
    </mat-paginator>
</div>